<template>
    <div class="home">
        <!-- {{ banner }} -->
        <div class="box">
            <!-- 导航 -->
            <div class="top">
                <div class="t-img">
                    <img src="/src/assets/4-min.png" alt="">
                </div>
                <div class="nav">
                    <img class="fen" src="/src/assets/分类白.png" alt="">
                    <ul class="t-nav">
                        <li><router-link to="/">首页</router-link></li>
                        <li><router-link to="/about">院部简介</router-link></li>
                        <li v-for="item in nav" :key="item.id">
                            <a href="#">
                                {{ item.title }}
                                <ul class="ulsnone">
                                    <li v-for="item1 in item.child" :key="item1">
                                        {{ item1.title }}
                                    </li>
                                </ul>
                            </a>
                        </li>
                        <li><a href="#">领导关怀</a></li>
                        <li><a href="#">对外交流</a></li>
                        <li><a href="#">社会服务</a></li>
                        <li><a href="#">师资力量</a></li>
                        <li><a href="#">实训中心</a></li>
                        <li><a href="#">实习基地</a></li>
                    </ul>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <t-swiper class="tdesign-demo-block--swiper" :duration="300" :interval="2000">
                    <t-swiper-item v-for="item in banner" :key="item.id">
                        <div class="demo-item"><img :src="item.image" alt=""></div>
                    </t-swiper-item>
                </t-swiper>
            </div>
            <!-- 院部新闻 -->
            <div class="News">
                <div class="News-box">
                    <div class="N-top">
                        <div class="title">院部新闻</div>
                        <div class="more">查看更多<img src="/src/assets/右-圆.png" alt=""></div>
                    </div>
                    <div class="N-middle" v-for="(item, index) in news" :key="item.id">
                        <div class="m-img">
                            <img :src="item.image" alt="">
                        </div>
                        <div class="m-right">
                            <div class="right-t">
                                {{ item.title }}
                            </div>
                            <div class="right-m">
                                <div class="line"></div>
                                <div>
                                    {{ item.create_time }}
                                </div>
                            </div>
                            <div class="right-m2">
                                {{ item.abstract }}
                            </div>
                            <div class="right-b">
                                <div class="b-img">
                                    <img class="img-left" src="/src/assets/蓝左-圆.png" alt="">
                                    <img class="img-right" src="/src/assets/蓝右-圆.png" alt="">
                                </div>
                                <div class="b-right">
                                    <span>{{ index + 1 }}</span>/{{ news.length }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="N-box">
                        <div class="N-loop" v-for="(item, index) in News" :key="index">
                            <div class="N-l-tit">
                                {{ item.text }}
                            </div>
                            <div class="N-l-time">
                                <img :src="item.image" alt="">
                                <span>{{ item.time }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 校企合作 -->
            <div class="construction">
                <div class="construction-box">
                    <div class="N-top">
                        <div class="title">党团建设</div>
                        <div class="more">查看更多<img src="/src/assets/右-圆.png" alt=""></div>
                    </div>
                    <div class="con-left">
                        <div class="c-l-loop" v-for="(item, index) in construction" :key="index">
                            <div class="con-l">
                                <div>{{ item.time1 }}</div>
                                <div>{{ item.time2 }}</div>
                            </div>
                            <div class="con-r">
                                {{ item.text }}
                            </div>
                        </div>
                    </div>
                    <div class="con-middle">
                        <img src="/src/assets/未标题-1-min.png" alt="">
                    </div>
                    <div class="con-right">
                        <div class="c-l-loop" v-for="(item, index) in construction" :key="index">
                            <div class="con-r">
                                {{ item.text }}
                            </div>
                            <div class="con-l">
                                <div>{{ item.time1 }}</div>
                                <div>{{ item.time2 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 手机端校企合作 -->
            <div class="construction1">
                <div class="construction-box">
                    <div class="N-top">
                        <div class="title">校企合作</div>
                        <div class="more">查看更多<img src="/src/assets/右-圆.png" alt=""></div>
                    </div>
                    <div class="con-left">
                        <div class="c-l-loop" v-for="(item, index) in construction" :key="index">
                            <div class="con-l">
                                <div>{{ item.time1 }}</div>
                                <div>{{ item.time2 }}</div>
                            </div>
                            <div class="con-r">
                                {{ item.text }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 技能大赛 -->
            <div class="skill">
                <div class="skill-box">
                    <div class="skill-top">
                        <div class="title">技能大赛</div>
                        <div class="more">查看更多<img src="/src/assets/右-圆.png" alt=""></div>
                    </div>
                    <div class="N-top">
                        <div class="title">校企合作</div>
                        <div class="more">查看更多<img src="/src/assets/右-圆.png" alt=""></div>
                    </div>
                    <div class="skill-middle">
                        <t-swiper class="tdesign-demo-block--swiper" type="card" :height="280" :duration="300"
                            :interval="2000">
                            <t-swiper-item v-for="item in 6" :key="item">
                                <div class="demo-item"><img src="/src/assets/3.jpg" alt=""></div>
                            </t-swiper-item>
                        </t-swiper>
                    </div>
                    <div class="skill-img">
                        <div class="img"><img src="/src/assets/3.jpg" alt=""></div>
                        <div class="img"><img src="/src/assets/3.jpg" alt=""></div>
                        <div class="img"><img src="/src/assets/3.jpg" alt=""></div>
                    </div>
                </div>
            </div>
            <!-- 教研成果 -->
            <div class="box4">
                <div class="box4title">
                    <div class="box4title1">JIAO YAN CHENG GUO</div>
                    <div class="box4title2">教研成果</div>
                </div>
                <div class="box4center">
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/src/assets/3.jpg" alt="" />
                            <div class="box4center1-1font">
                                划重点!一图读懂山东 <br />
                                城院“十四五”发 <br />
                                展规划
                            </div>
                            <div class="box4center1-2font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/src/assets/3.jpg" alt="" />
                            <div class="box4center1-1font">
                                划重点!一图读懂山东 <br />
                                城院“十四五”发 <br />
                                展规划
                            </div>
                            <div class="box4center1-2font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/src/assets/3.jpg" alt="" />
                            <div class="box4center1-1font">
                                划重点!一图读懂山东 <br />
                                城院“十四五”发 <br />
                                展规划
                            </div>
                            <div class="box4center1-2font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/src/assets/3.jpg" alt="" />
                            <div class="box4center1-1font">
                                划重点!一图读懂山东 <br />
                                城院“十四五”发 <br />
                                展规划
                            </div>
                            <div class="box4center1-2font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                </div>
            </div>
            <!-- 学生动态 -->
            <div class="dynamic">
                <div class="dynamic-box">
                    <div class="dynamic-top">
                        <div class="title">学生动态</div>
                        <div class="more">查看更多<img src="/src/assets/右-圆.png" alt=""></div>
                    </div>
                    <div class="N-top">
                        <div class="title">学生动态</div>
                        <div class="more">查看更多<img src="/src/assets/右-圆.png" alt=""></div>
                    </div>
                    <div class="dynamic-middle">
                        <div class="img-left">
                            <img src="/src/assets/3.jpg" alt="">
                        </div>
                        <div class="img-right">
                            <div class="img-r-top">
                                <div class="r-t-l">
                                    <img src="/src/assets/4.jpg" alt="">
                                    <div class="text">迎新晚会现代舞</div>
                                </div>
                                <div class="r-t-r">
                                    <img src="/src/assets/4.jpg" alt="">
                                    <div class="text">运动会</div>
                                </div>
                            </div>
                            <div class="img-r-bottom">
                                <div class="r-b-l">
                                    <img src="/src/assets/4.jpg" alt="">
                                    <div class="text">运动会全景</div>
                                </div>
                                <div class="r-b-r">
                                    <img src="/src/assets/4.jpg" alt="">
                                    <div class="text">才艺展示</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dynamic-bottom">
                        <ul>
                            <li class="bold"><a href="#">友情链接</a></li>
                            <li><a href="#">中华人民共和国教育部</a></li>
                            <li><a href="#">山东教育厅</a></li>
                            <li><a href="#">山东省科学技术厅</a></li>
                            <li><a href="#">中国高职专教育网</a></li>
                            <li><a href="#">山东省科学技术厅</a></li>
                            <li><a href="#">中国高职专教育网</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="foot">
                <div class="footcenter">
                    <div class="foot-box">
                        <div class="foot-top">
                            <img src="/src/assets/3-min.png" alt="">
                        </div>
                        <div class="foot-middle">
                            <div class="foot-m-left">
                                <div class="footcenter-left-1">联系我们</div>
                                <div class="footcenter-left-2">
                                    <table>
                                        <tr>
                                            <td>办公室</td>
                                            <td>&nbsp;:&nbsp;&nbsp;0535-2246666</td>
                                        </tr>
                                        <tr>
                                            <td>招生咨询</td>
                                            <td>&nbsp;:&nbsp;&nbsp;0535-2246625</td>
                                        </tr>
                                        <tr>
                                            <td>官网</td>
                                            <td>&nbsp;:&nbsp;&nbsp;www.sdcc.edu.cn</td>
                                        </tr>
                                        <tr>
                                            <td>邮箱</td>
                                            <td>&nbsp;:&nbsp;&nbsp;sdccxy@126.com</td>
                                        </tr>
                                        <tr>
                                            <td>校址</td>
                                            <td>&nbsp;:&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="foot-m-right">
                                <div><img src="/src/assets/二维码.jpg" alt=""></div>
                                <div>官方微信</div>
                            </div>
                        </div>
                    </div>
                    <div class="footcenter-left">
                        <div class="footcenter-left-1">联系我们</div>
                        <div class="footcenter-left-2">
                            <table>
                                <tr>
                                    <td>办公室</td>
                                    <td>&nbsp;:&nbsp;&nbsp;0535-2246666</td>
                                </tr>
                                <tr>
                                    <td>招生咨询</td>
                                    <td>&nbsp;:&nbsp;&nbsp;0535-2246625</td>
                                </tr>
                                <tr>
                                    <td>官网</td>
                                    <td>&nbsp;:&nbsp;&nbsp;www.sdcc.edu.cn</td>
                                </tr>
                                <tr>
                                    <td>邮箱</td>
                                    <td>&nbsp;:&nbsp;&nbsp;sdccxy@126.com</td>
                                </tr>
                                <tr>
                                    <td>校址</td>
                                    <td>&nbsp;:&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="footcenter-center"><img src="/src/assets/3-min.png" alt=""></div>
                    <div class="footcenter-right">
                        <img class="footcenter-right1" src="/src/assets/微信.png" />
                        <img class="footcenter-right2" src="/src/assets/微博.png" />
                    </div>
                </div>
                <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { RouterLink } from "vue-router";
import { onMounted } from "vue";
//异步
// onMounted(() => {
//     getBrList().then((res) => {
//         console.log(res);
//         list.value = res.data.data
//     }).catch((err) => {

//     })
// })
import $, { data } from 'jquery';
$(function () {
    $('.nav').click(function () {
        $('.t-nav').toggle();
    });
});
//导航栏接口
import { getList } from "@/api/index";
const nav = ref()
const navlist = async () => {
    const { data: { data } } = await getList()
    nav.value = data
    console.log(nav);
}
// 新闻动态移动
const construction = reactive([{
    time1: "28", time2: '2019-01', text: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训……"
}, {
    time1: "28", time2: '2019-01', text: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训……"
}, {
    time1: "28", time2: '2019-01', text: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训……"
}, {
    time1: "28", time2: '2019-01', text: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训……"
}])
const News = reactive([{
    text: '传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题……', image: '/src/assets/蓝时钟.png', time: '2022-11-02'
}, {
    text: '传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题……', image: '/src/assets/蓝时钟.png', time: '2022-11-02'
}, {
    text: '传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题……', image: '/src/assets/蓝时钟.png', time: '2022-11-02'
}])
// 接口banner图
import { getBrList } from "@/api/banner"
const banner = ref()
const getbanner = async () => {
    try {
        const { data: { data } } = await getBrList()
        banner.value = data
        console.log(banner);
    } catch {
        alert('失败')
    }
}
// 新闻详情
import { getnsList } from "@/api/news"
const news = ref()
const newslist = async () => {
    const { data: { data } } = await getnsList()
    news.value = data.list
    $(function () {
        $(".N-middle:first").show().siblings(".N-middle").hide();
        var index = 0;
        $(".img-right").click(() => {
            index++;
            console.log(index);
            if (index < 3) {
                $(".N-middle").eq(index).show().siblings(".N-middle").hide();
            } else {
                index = -1;
            }
        });
        $(".img-left").click(() => {
            index--;
            if (index >= 0) {
                $(".N-middle").eq(index).show().siblings(".N-middle ").hide();
            } else {
                index = 3;
            }
        });
    });
    console.log(news);

}
// 调用
getbanner()
newslist()
navlist()
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;

    a {
        text-decoration: none;
        color: #333;
    }
}

@media screen and (min-width: 968px) {
    .home {
        .box {

            //导航
            .top {
                width: 80%;
                margin: auto;
                display: flex;
                align-items: center;
                position: absolute;
                z-index: 999;
                left: 13%;

                .t-img {
                    width: 20%;

                    img {
                        width: 100%;
                    }
                }

                .nav {
                    margin-left: 20px;

                    .fen {
                        display: none;
                    }

                    ul {
                        display: flex;
                        list-style: none;

                        li {
                            margin: 0 10px;
                            position: relative;


                            a {
                                text-decoration: none;
                                color: #fff;
                                font-weight: bold;

                            }

                            .ulsnone {
                                width: 200%;
                                display: none;
                                position: absolute;

                                li {
                                    padding: 10px 0;
                                    width: 100%;
                                    margin: 0;
                                }
                            }
                        }

                        li:hover {
                            .ulsnone {
                                display: block;
                            }
                        }
                    }
                }
            }

            //轮播图
            .swiper {
                .demo-item {
                    width: 100%;

                    img {
                        width: 100%;
                        height: 650px;
                    }
                }
            }

            //院部新闻
            .News {
                background-color: #fff;
                padding-top: 20px;
                margin-bottom: 30px;

                .News-box {
                    width: 85%;
                    margin: auto;

                    .N-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 3%;
                                height: 17px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .N-middle {
                        margin-top: 20px;
                        display: flex;
                        justify-content: space-between;

                        .m-img {
                            width: 49%;

                            img {
                                width: 100%;
                                height: 300px;
                            }
                        }

                        .m-right {
                            height: 300px;
                            box-shadow: 0 0 5px #e7e7e7;
                            width: 49%;
                            padding: 10px;

                            .right-t {
                                padding-top: 20px;
                                font-weight: bold;
                                font-size: 16px;
                            }

                            .right-m {
                                margin-top: 10px;
                                margin-bottom: 20px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .line {
                                    margin-left: 10px;
                                    width: 70%;
                                    height: 2px;
                                    background-color: #e7e7e7;
                                }

                                div:nth-child(2) {
                                    color: #005bac;
                                    font-size: 14px;
                                }
                            }

                            .right-m2 {
                                height: 70px;
                            }

                            .right-b {
                                margin-top: 15%;
                                display: flex;
                                justify-content: space-between;

                                .b-img {
                                    width: 40%;

                                    img {
                                        width: 17%;
                                        height: 40px;
                                        margin-left: 20px;
                                    }
                                }

                                .b-right {
                                    span {
                                        font-size: 22px;
                                        font-weight: bold;
                                        color: #005bac;
                                    }
                                }
                            }
                        }
                    }

                    .N-box {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;

                        .N-loop {
                            margin-top: 20px;
                            width: 30%;
                            padding: 10px;
                            box-shadow: 0 0 5px #cdcdcd;

                            .N-l-time {
                                text-align: right;
                                padding-top: 10px;

                                img {
                                    width: 5%;
                                    height: 17px;
                                    margin-bottom: -2px;
                                }

                                span {
                                    font-size: 15px;
                                    color: #005bac;
                                }
                            }
                        }

                        .N-loop:hover {
                            background-color: #a7c5df;
                        }
                    }
                }
            }

            //校企合作
            .construction {
                padding: 10px 0;
                background-color: #f9f9f9;

                .construction-box {
                    width: 85%;
                    margin: auto;
                    display: flex;

                    .N-top {
                        display: none;
                    }

                    .con-left {
                        width: 35%;

                        .c-l-loop {
                            display: flex;
                            margin: 10px 0;

                            .con-l {
                                width: 20%;
                                background-color: #005bac;
                                color: #fff;

                                div:nth-child(1) {
                                    font-size: 20px;
                                    padding: 20px 20px 5px 20px;
                                }

                                div:nth-child(2) {
                                    font-size: 10px;
                                    text-align: center;
                                    padding-bottom: 10px;
                                }
                            }

                            .con-r {
                                background-color: #fff;
                                padding: 20px;
                                box-shadow: 0 0 5px #e7e7e7;
                            }
                        }
                    }

                    .con-middle {
                        width: 30%;

                        img {
                            width: 100%;
                        }
                    }

                    .con-right {
                        width: 35%;

                        .c-l-loop {
                            display: flex;
                            margin: 10px 0;

                            .con-l {
                                width: 20%;
                                background-color: #005bac;
                                color: #fff;

                                div:nth-child(1) {
                                    font-size: 20px;
                                    padding: 20px 20px 5px 20px;
                                }

                                div:nth-child(2) {
                                    font-size: 10px;
                                    text-align: center;
                                    padding-bottom: 10px;
                                }
                            }

                            .con-r {
                                background-color: #fff;
                                padding: 20px;
                                box-shadow: 0 0 5px #e7e7e7;
                            }
                        }
                    }

                }
            }

            .construction1 {
                display: none;
            }

            //教研成果
            .box4 {
                height: 520px;
                margin-top: 20px;
                padding-top: 20px;
                position: relative;
                background: url("/src/assets/1-min.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;

                .box4title {
                    text-align: center;
                    padding-top: 20px;
                    position: relative;
                    margin-bottom: 60px;

                    .box4title1 {
                        background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(225, 224, 224));
                        /* 设置背景以文字进行裁切 */
                        background-clip: text;
                        -webkit-background-clip: text;
                        /* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
                        color: transparent;
                        font-size: 20px;
                        font-weight: bold;
                    }

                    .box4title2 {
                        color: #c90000;
                        font-weight: bold;
                        font-size: 30px;
                        position: absolute;
                        left: 46%;
                        top: 18%;
                    }
                }

                .box4center {
                    width: 85%;
                    margin: auto;
                    height: 380px;
                    display: flex;
                    justify-content: space-between;

                    .box4center1 {
                        width: 23%;
                        border-radius: 25%;

                        &:hover {
                            margin-top: -30px;

                            .box4center1-1 .box4center1-1font {
                                width: 100%;
                                height: 100%;
                                display: none;
                                background-color: rgba(168, 197, 226, 0.6);
                            }

                            .box4center1-1 .box4center1-2font {
                                width: 100%;
                                height: 100%;
                                display: block;
                                background-color: rgba(168, 197, 226, 0.6);
                            }
                        }

                        .box4center1-1 {
                            position: relative;

                            img {
                                width: 100%;
                            }

                            .box4center1-1font {
                                position: absolute;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                color: #fff;
                                font-size: 20px;
                                padding-top: 35px;
                                background-color: rgba(132, 132, 132, 0.4);
                            }

                            .box4center1-2font {
                                position: absolute;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                color: #fff;
                                font-size: 20px;
                                padding-top: 35px;
                                display: none;
                            }
                        }

                        .box4center1-2 {
                            background-color: #fff;
                            text-align: center;
                            padding: 20px 20px 40px;
                            font-size: 20px;
                        }
                    }
                }
            }

            //技能大赛
            .skill {
                padding: 10px 0;
                background-color: #fff;

                .skill-box {
                    width: 85%;
                    margin: auto;

                    .skill-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 3%;
                                height: 17px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .N-top {
                        display: none;
                    }

                    .skill-middle {
                        .demo-item {
                            width: 100%;

                            img {
                                width: 100%;
                            }
                        }
                    }

                    .skill-img {
                        display: none;
                    }
                }
            }

            //学生动态
            .dynamic {
                padding: 20px 0;
                background-color: #fff;

                .dynamic-box {
                    width: 85%;
                    margin: auto;

                    .dynamic-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 3%;
                                height: 17px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .N-top {
                        display: none;
                    }

                    .dynamic-middle {
                        margin-top: 20px;
                        display: flex;
                        justify-content: space-between;

                        .img-left {
                            width: 50%;

                            img {
                                width: 100%;
                                height: 366px;
                            }
                        }

                        .img-right {
                            width: 50%;

                            .img-r-top {
                                display: flex;
                                justify-content: space-between;
                                width: 100%;

                                .r-t-l {
                                    width: 100%;
                                    margin-left: 10px;
                                    position: relative;

                                    img {

                                        width: 100%;
                                        height: 176px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }

                                .r-t-r {
                                    width: 100%;
                                    margin-left: 10px;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 176px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }

                            }

                            .img-r-bottom {
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 10px;

                                .r-b-l {
                                    width: 100%;
                                    margin-left: 10px;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 176px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }

                                .r-b-r {
                                    width: 100%;
                                    margin-left: 10px;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 176px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }
                            }
                        }
                    }

                    .dynamic-bottom {
                        ul {
                            display: flex;

                            .bold {
                                font-weight: bold;
                                margin-left: 0;
                            }

                            li {
                                margin: 20px 0 0 30px;
                            }
                        }
                    }
                }
            }

            //底部
            .foot {
                background-image: url(/src/assets/2-min.jpg);
                padding-top: 20px;

                .footcenter {
                    width: 85%;
                    margin: auto;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid rgba(225, 225, 225, 0.6);

                    .foot-box {
                        display: none;
                    }

                    .footcenter-left {
                        width: 30%;
                        color: #fff;

                        .footcenter-left-1 {
                            font-size: 20px;
                            margin-bottom: 10px;
                        }

                        .footcenter-left-2 {
                            width: 100%;

                            table {
                                width: 100%;

                                tr {
                                    margin-bottom: 20px;

                                    td:nth-child(1) {
                                        width: 20%;
                                        text-align-last: justify;
                                        text-align: justify;
                                        text-justify: distribute-all-lines;
                                        padding-bottom: 10px;
                                    }

                                    td:nth-child(2) {
                                        width: 80%;
                                        padding-bottom: 10px;
                                    }
                                }
                            }
                        }
                    }

                    .footcenter-center {
                        width: 50%;
                        margin-top: 50px;

                        img {
                            width: 80%;
                            height: 70px;
                        }
                    }

                    .footcenter-right {
                        width: 25%;
                        padding-top: 45px;
                        box-sizing: border-box;

                        .footcenter-right1 {
                            width: 40px;
                            height: 40px;
                            margin-right: 40px;
                        }

                        .footcenter-right2 {
                            width: 37px;
                            height: 36px;

                        }
                    }
                }

                .footbottom {
                    margin-top: 34px;
                    color: rgba(255, 255, 255, 0.6);
                    // background-color: rgba(0, 0, 0, 0.6);
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                    font-size: 13px;
                }
            }
        }
    }
}

@media screen and (max-width: 968px) {
    .home {
        .box {
            position: relative;

            //导航
            .top {
                width: 90%;
                margin: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: absolute;
                z-index: 999;
                left: 10%;

                .t-img {
                    width: 50%;

                    img {
                        width: 80%;
                        height: 44px;
                    }
                }

                .nav {
                    margin-left: 20px;
                    width: 30%;
                    position: relative;

                    .fen {
                        display: block;
                        width: 20%;
                        height: 20px;
                        margin-left: 50px;
                    }

                    ul {
                        position: absolute;
                        background-color: rgba($color: #000000, $alpha: 0.5);

                        li {
                            margin: 0 10px;
                            width: 70px;
                            text-align: center;

                            a {
                                text-decoration: none;
                                color: #fff;
                                font-weight: bold;
                                font-size: 10px;
                            }

                            .ulsnone {
                                display: none;
                            }
                        }
                    }
                }
            }

            //轮播图
            .swiper {
                .demo-item {
                    width: 100%;

                    img {
                        width: 100%;
                        height: 200px;
                    }
                }
            }

            //院部新闻
            .News {
                background-color: #fff;
                padding-top: 20px;
                margin-bottom: 30px;

                .News-box {
                    width: 90%;
                    margin: auto;

                    .N-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 2px solid #cdcdcd;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 10%;
                                height: 16px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .N-middle {
                        margin-top: 20px;

                        .m-img {
                            width: 100%;

                            img {
                                width: 100%;
                                height: 210px;
                            }
                        }

                        .m-right {
                            height: 260px;
                            box-shadow: 0 0 5px #e7e7e7;
                            padding: 10px;

                            .right-t {
                                padding-top: 20px;
                                font-weight: bold;
                                font-size: 15px;
                            }

                            .right-m {
                                margin-top: 10px;
                                margin-bottom: 20px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .line {
                                    margin-left: 10px;
                                    width: 60%;
                                    height: 2px;
                                    background-color: #e7e7e7;
                                }

                                div:nth-child(2) {
                                    color: #005bac;
                                    font-size: 10px;
                                }
                            }

                            .right-m2 {
                                font-size: 15px;
                                height: 70px;
                            }

                            .right-b {
                                margin-top: 15%;
                                display: flex;
                                justify-content: space-between;
                                padding-bottom: 10px;

                                .b-img {
                                    width: 40%;

                                    img {
                                        width: 20%;
                                        height: 26px;
                                        margin-left: 10px;
                                    }
                                }

                                .b-right {
                                    span {
                                        font-size: 22px;
                                        font-weight: bold;
                                        color: #005bac;
                                    }
                                }
                            }
                        }
                    }

                    .N-box {
                        width: 100%;

                        .N-loop {
                            margin-top: 20px;
                            width: 100%;
                            padding: 10px;
                            box-shadow: 0 0 5px #cdcdcd;

                            .N-l-time {
                                text-align: right;
                                padding-top: 10px;

                                img {
                                    width: 6%;
                                    height: 18px;
                                    margin-bottom: -2px;
                                }

                                span {
                                    font-size: 15px;
                                    color: #005bac;
                                }
                            }
                        }

                        .N-loop:hover {
                            background-color: #a7c5df;
                        }
                    }
                }
            }

            //党团建设
            .construction {
                padding: 10px 0;
                background-color: #f9f9f9;

                .construction-box {
                    width: 90%;
                    margin: auto;

                    .N-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 2px solid #cdcdcd;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 10%;
                                height: 16px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .con-left {
                        width: 100%;

                        .c-l-loop {
                            display: flex;
                            margin: 10px 0;

                            .con-l {
                                width: 20%;
                                background-color: #005bac;
                                color: #fff;

                                div:nth-child(1) {
                                    font-size: 16px;
                                    padding: 20px 20px 5px 20px;
                                }

                                div:nth-child(2) {
                                    font-size: 10px;
                                    text-align: center;
                                    padding-bottom: 10px;
                                }
                            }

                            .con-r {
                                background-color: #fff;
                                padding: 10px;
                                font-size: 15px;
                                box-shadow: 0 0 5px #e7e7e7;
                            }
                        }
                    }

                    .con-middle {
                        width: 30%;
                        display: none;

                        img {
                            width: 100%;
                        }
                    }

                    .con-right {
                        display: none;
                        width: 100%;

                        .c-l-loop {
                            display: flex;
                            margin: 10px 0;

                            .con-l {
                                width: 20%;
                                background-color: #005bac;
                                color: #fff;

                                div:nth-child(1) {
                                    font-size: 16px;
                                    padding: 20px 20px 5px 20px;
                                }

                                div:nth-child(2) {
                                    font-size: 10px;
                                    text-align: center;
                                    padding-bottom: 10px;
                                }
                            }

                            .con-r {
                                background-color: #fff;
                                padding: 10px;
                                font-size: 15px;
                                box-shadow: 0 0 5px #e7e7e7;
                            }
                        }
                    }

                }
            }

            //校企合作
            .construction1 {
                padding: 10px 0;
                background-color: #f9f9f9;

                .construction-box {
                    width: 90%;
                    margin: auto;

                    .N-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 2px solid #cdcdcd;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 10%;
                                height: 16px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .con-left {
                        width: 100%;

                        .c-l-loop {
                            display: flex;
                            margin: 10px 0;

                            .con-l {
                                width: 20%;
                                background-color: #005bac;
                                color: #fff;

                                div:nth-child(1) {
                                    font-size: 16px;
                                    padding: 20px 20px 5px 20px;
                                }

                                div:nth-child(2) {
                                    font-size: 10px;
                                    text-align: center;
                                    padding-bottom: 10px;
                                }
                            }

                            .con-r {
                                background-color: #fff;
                                padding: 10px;
                                font-size: 15px;
                                box-shadow: 0 0 5px #e7e7e7;
                            }
                        }
                    }
                }

            }

            //技能大赛
            .skill {
                padding: 10px 0;
                background-color: #fff;

                .skill-box {
                    width: 90%;
                    margin: auto;

                    .N-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 2px solid #cdcdcd;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 10%;
                                height: 16px;
                                margin-bottom: -2px;
                            }
                        }
                    }


                    .skill-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        display: none;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 10%;
                                height: 16px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .skill-middle {
                        display: none;
                    }

                    .skill-img {
                        width: 100%;

                        .img {
                            margin: 10px 0;

                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            }

            //教研成果
            .box4 {
                margin-top: 20px;
                padding-top: 20px;
                position: relative;
                background: url("/src/assets/1-min.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                height: 1600px;

                .box4title {
                    text-align: center;
                    padding-top: 20px;
                    position: relative;
                    margin-bottom: 60px;

                    .box4title1 {
                        background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(225, 224, 224));
                        /* 设置背景以文字进行裁切 */
                        background-clip: text;
                        -webkit-background-clip: text;
                        /* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
                        color: transparent;
                        font-size: 20px;
                        font-weight: bold;
                    }

                    .box4title2 {
                        color: #c90000;
                        font-weight: bold;
                        font-size: 30px;
                        position: absolute;
                        left: 36%;
                        top: 18%;
                    }
                }

                .box4center {
                    width: 90%;
                    margin: auto;
                    height: 380px;

                    .box4center1 {
                        margin: 10px 0;
                        width: 100%;
                        border-radius: 25%;

                        &:hover {
                            margin-top: -30px;

                            .box4center1-1 .box4center1-1font {
                                width: 100%;
                                height: 100%;
                                display: none;
                                background-color: rgba(168, 197, 226, 0.6);
                            }

                            .box4center1-1 .box4center1-2font {
                                width: 100%;
                                height: 100%;
                                display: block;
                                background-color: rgba(168, 197, 226, 0.6);
                            }
                        }

                        .box4center1-1 {
                            position: relative;

                            img {
                                width: 100%;
                            }

                            .box4center1-1font {
                                position: absolute;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                color: #fff;
                                font-size: 20px;
                                padding-top: 35px;
                                background-color: rgba(132, 132, 132, 0.4);
                            }

                            .box4center1-2font {
                                position: absolute;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                color: #fff;
                                font-size: 20px;
                                padding-top: 35px;
                                display: none;
                            }
                        }

                        .box4center1-2 {
                            background-color: #fff;
                            text-align: center;
                            padding: 20px 20px 40px;
                            font-size: 20px;
                        }
                    }
                }
            }

            //学生动态
            .dynamic {
                padding: 20px 0;
                background-color: #fff;

                .dynamic-box {
                    width: 90%;
                    margin: auto;

                    .dynamic-top {
                        display: none;
                    }

                    .N-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 2px solid #cdcdcd;

                        .title {
                            width: 49%;
                            font-size: 20px;
                            font-weight: bold;
                            color: #005bac;
                        }

                        .more {
                            width: 49%;
                            display: flex;
                            justify-content: end;
                            font-size: 14px;
                            color: #cdcdcd;

                            img {
                                width: 10%;
                                height: 16px;
                                margin-bottom: -2px;
                            }
                        }
                    }

                    .dynamic-middle {
                        margin-top: 20px;

                        .img-left {
                            width: 100%;

                            img {
                                width: 100%;
                                height: 240px;
                            }
                        }

                        .img-right {
                            width: 100%;

                            .img-r-top {
                                display: flex;
                                justify-content: space-between;
                                width: 100%;
                                padding-top: 5px;

                                .r-t-l {
                                    width: 100%;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 100px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }

                                .r-t-r {
                                    width: 100%;
                                    margin-left: 5px;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 100px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }

                            }

                            .img-r-bottom {
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 5px;

                                .r-b-l {
                                    width: 100%;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 100px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }

                                .r-b-r {
                                    width: 100%;
                                    margin-left: 5px;
                                    position: relative;

                                    img {
                                        width: 100%;
                                        height: 100px;
                                    }

                                    .text {
                                        position: absolute;
                                        background-color: rgba(0, 0, 0, 0.3);
                                        width: 100%;
                                        color: #fff;
                                        bottom: 3%;
                                        line-height: 30px;
                                        text-align: center;
                                    }
                                }
                            }
                        }
                    }

                    .dynamic-bottom {
                        display: none;
                    }
                }
            }

            //底部
            .foot {
                background-image: url(/src/assets/2-min.jpg);
                padding-top: 30px;

                .footcenter {
                    width: 90%;
                    margin: auto;
                    border-bottom: 1px solid rgba(225, 225, 225, 0.6);

                    .foot-box {
                        .foot-top {
                            text-align: left;

                            img {
                                width: 80%;
                                height: 42px;
                            }
                        }

                        .foot-middle {
                            margin-top: 20px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .foot-m-left {
                                width: 80%;
                                color: #fff;

                                .footcenter-left-1 {
                                    font-size: 16px;
                                    margin-bottom: 10px;
                                }

                                .footcenter-left-2 {
                                    width: 100%;

                                    table {
                                        width: 100%;

                                        tr {
                                            margin-bottom: 20px;

                                            td:nth-child(1) {
                                                width: 20%;
                                                text-align-last: justify;
                                                text-align: justify;
                                                text-justify: distribute-all-lines;
                                                padding-bottom: 10px;
                                                font-size: 12px;
                                            }

                                            td:nth-child(2) {
                                                padding-bottom: 10px;
                                                font-size: 12px;
                                            }
                                        }
                                    }
                                }
                            }

                            .foot-m-right {
                                width: 20%;

                                div:nth-child(1) {
                                    width: 100%;

                                    img {
                                        width: 100%;
                                        height: 72px;
                                    }
                                }

                                div:nth-child(2) {
                                    text-align: center;
                                    color: #fff;
                                    font-size: 12px;
                                }
                            }
                        }
                    }


                    .footcenter-left {
                        display: none;
                    }

                    .footcenter-center {
                        display: none;
                    }

                    .footcenter-right {
                        display: none;
                    }
                }

                .footbottom {
                    margin-top: 30px;
                    color: rgba(255, 255, 255, 0.6);
                    // background-color: rgba(0, 0, 0, 0.6);
                    text-align: center;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                }
            }
        }
    }
}
</style>